<template>
	<view class="join">
		<view class="content">
			<view class="avatar">
				<image :src="store.avatar" mode="aspectFill"></image>
			</view>

			<view class="store_name">
				{{store.store_name || ''}}
			</view>

			<view style="height: 160rpx;"></view>

			<view class="input_name">
				<view class="label">
					昵称
				</view>
				<input type="text" v-model="nickname" placeholder="请输入" placeholder-class="placeholder-class" />
			</view>

			<view class="input_name">
				<view class="label">
					手机号
				</view>
				<input type="text" v-model="mobile" placeholder="请输入" placeholder-class="placeholder-class" />
			</view>

			<!-- <view class="input_name flex_r_b">
				<view class="label">
					性别
				</view>
				<view class="sex_box flex_center">
					<view class="sex_item flex_r_around" @click="sex = 0" :id="sex == 0 ? 'select' : ''">
						<view class="flex_center">
							<image :src="$util.prefix(`store/girl${sex == 0 ? '_select' : ''}.png`)"></image>
							<text>女</text>
						</view>
					</view>
					<view class="sex_item flex_r_around" @click="sex = 1" :id="sex == 1 ? 'select' : ''">
						<view class="flex_center">
							<image :src="$util.prefix(`store/boy${sex == 1 ? '_select' : ''}.png`)"></image>
							<text>男</text>
						</view>
					</view>
				</view>
			</view> -->

		</view>

		<view class="btn" @click="onSubmit">
			立即提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_id: 0,

				store: {},

				nickname: '',
				mobile: '',
				// sex: 1,
			}
		},
		methods: {
			getStore() {
				this.$get('/store/getStoreInfo',{
					store_id: this.store_id
				}).then(res=>{
					this.store = res.data;
				})
			},

			onSubmit() {
				this.$post('/store.store/storeShareProvider', {
					store_id: this.store_id,
					mobile: this.mobile,
					nickname: this.nickname,
					// sex: this.sex,
				}).then(res => {
					uni.reLaunch({
						url: '/pages/share/share'
					})
				})

			}
		},

		onLoad(option) {
			this.store_id = option.store_id;
			this.getStore();
		}
	}
</script>

<style lang="less" scoped>
	.placeholder-class {
		color: #999999;
	}

	.join {
		width: 100vw;
		height: 100vh;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/store/join_bg.png') 0 0 no-repeat;
		background-color: #FFF;
		background-size: 100%;
		padding-top: 200rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
	}

	.content {
		width: 100vw;
		background: #FFFFFF;
		border-radius: 72rpx 72rpx 0rpx 0rpx;
		min-height: 300rpx;
		display: flex;
		align-items: center;
		flex-direction: column;

		.avatar {
			border: 8rpx solid #FFFFFF;
			width: 170rpx;
			height: 170rpx;
			border-radius: 93rpx;
			margin-top: -85rpx;
			overflow: hidden;

			image {
				width: 154rpx;
				height: 154rpx;
			}
		}

		.store_name {
			font-weight: 600;
			font-size: 40rpx;
			color: #131313;
			max-width: 600rpx;
			margin-top: 30rpx;
		}

		.input_name {
			display: flex;
			align-items: center;
			height: 100rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 0 32rpx;
			margin: 0 0 20rpx;
			width: 600rpx;
			justify-content: space-between;

			.label {
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
			}

			input {
				flex: 1;
				text-align: right;
				font-size: 32rpx;
				color: #333;
			}

			.sex_box {
				flex-direction: row-reverse;

				#select {
					background: linear-gradient(159deg, #FF548B 0%, #FD2A53 100%);

					text {
						color: #FFFFFF;
					}
				}

				.sex_item {
					width: 144rpx;
					height: 60rpx;
					background: #EEEEEE;
					border-radius: 30rpx;
					margin-left: 16rpx;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 12rpx;
					}

					text {
						font-size: 32rpx;
						color: #999999;
					}
				}

			}

		}



	}

	.btn {
		width: 632rpx;
		height: 96rpx;
		background: linear-gradient(159deg, #FF548B 0%, #FD2A53 100%);
		border-radius: 48rpx;
		line-height: 96rpx;
		text-align: center;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>